<template>
    <h2 style="text-align: center;">网格类型管理</h2>
    <!-- 面包屑 -->
    <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>
            <a href="/">基础数据</a>
        </el-breadcrumb-item>
        <el-breadcrumb-item>网格类型</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 查询表单部分 -->
    <div style="border: 1px solid #ccc; margin:20px 3px; padding: 20px;">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="网格类型名称">
                <el-input v-model="formInline.GridType_Name" placeholder="请输入网格类型名称" clearable />
            </el-form-item>

            <el-form-item label="网格类别">
                <el-select v-model="formInline.CategoryType" placeholder="请选择网格类别" clearable>
                    <el-option label="物理网格" value="物理网格" />
                    <el-option label="逻辑网格" value="逻辑网格" />
                </el-select>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="GetGridType">查询</el-button>
                <el-button type="danger" @click="Reset">重置</el-button>
            </el-form-item>
        </el-form>
    </div>

    <!-- 数据显示部分 -->
    <div style="border: 1px solid#ccc; margin: 20px 3px; padding: 20px;">
        <el-button  type="success" @click="AddGrid">新增+</el-button>
        <el-table :data="Info" style="width: 100%">
            <el-table-column fixed type="index" label="序号" width="90" />
            <el-table-column prop="Id" label="编号" width="200" />
            <el-table-column prop="GridType_Name" label="网格类型名称" width="200" />
            <el-table-column prop="CategoryType" label="网格类别" width="200" />
            <el-table-column prop="ProfessionGrid" label="专业网格" width="200" />
            <el-table-column fixed="right" label="Operations" min-width="120">
            <template #default="setup">
                <el-button  type="danger" size="small" @click="DelGridType(setup.row.Id)">删除</el-button>
                <el-button  type="primary" size="small" @click="UpdateGrid(setup.row)">编辑</el-button>
            </template>
            </el-table-column>
        </el-table>
    </div>
    
    <!-- 添加弹出窗 -->
    <el-dialog
        v-model="AdddialogVisible"
        title="新增网格类型"
        width="620"
    >
        <el-form
            ref="ruleFormRef"
            style="max-width: 600px"
            :model="AddInfo"
            :rules="rules"
            label-width="auto"
            class="demo-ruleForm"
            :size="formSize"
            status-icon
        >
            <el-form-item label="网格类型名称" prop="GridType_Name">
                <el-input v-model="AddInfo.GridType_Name" />
            </el-form-item>

            <el-form-item label="网格类别名称">
                <el-select v-model="AddInfo.CategoryType" placeholder="请选择网格类别" clearable>
                    <el-option label="物理网格" value="物理网格" />
                    <el-option label="逻辑网格" value="逻辑网格" />
                </el-select>
            </el-form-item>

            <el-form-item v-show="AddInfo.CategoryType=='逻辑网格'" label="专业网格">
                <el-checkbox-group v-model=" AddInfo.ProfessionGrid">
                    <el-checkbox value="行政" name="type">行政</el-checkbox>
                    <el-checkbox value="公安" name="type">公安</el-checkbox>
                    <el-checkbox value="城管" name="type">城管</el-checkbox>
                    <el-checkbox value="环保" name="type">环保</el-checkbox>
                </el-checkbox-group>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="submitForm(ruleFormRef)">添加</el-button>
                <el-button @click="resetForm(ruleFormRef)">重置</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>

    <!-- 修改弹出窗 -->
    <el-dialog
        v-model="UpddialogVisible"
        title="修改网格类型"
        width="620"
    >
        <el-form
            ref="ruleFormRef"
            style="max-width: 600px"
            :model="AddInfo"
            :rules="rules"
            label-width="auto"
            class="demo-ruleForm"
            :size="formSize"
            status-icon
        >
            <el-form-item label="网格类型名称" prop="GridType_Name">
                <el-input v-model="AddInfo.GridType_Name" />
            </el-form-item>

            <el-form-item label="网格类别名称">
                <el-select v-model="AddInfo.CategoryType" placeholder="请选择网格类别" clearable>
                    <el-option label="物理网格" value="物理网格" />
                    <el-option label="逻辑网格" value="逻辑网格" />
                </el-select>
            </el-form-item>

            <el-form-item v-show="AddInfo.CategoryType=='逻辑网格'" label="专业网格">
                <el-checkbox-group v-model=" AddInfo.ProfessionGrid">
                    <el-checkbox value="行政" name="type">行政</el-checkbox>
                    <el-checkbox value="公安" name="type">公安</el-checkbox>
                    <el-checkbox value="城管" name="type">城管</el-checkbox>
                    <el-checkbox value="环保" name="type">环保</el-checkbox>
                </el-checkbox-group>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="UpdatesubmitForm(ruleFormRef)">修改</el-button>
                <el-button @click="resetForm(ruleFormRef)">重置</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>


</template>



<script setup lang="ts">
    import axios from 'axios';
    import {ref,reactive,onMounted} from 'vue';
    import { ElMessage, ElMessageBox } from 'element-plus'
    import type { ComponentSize, FormInstance, FormRules } from 'element-plus'

    //显示响应式数据
    const Info=ref([])
    //钩子函数
    onMounted(()=>{
        GetGridType();
    })

    //查询条件
    const formInline = reactive({
        GridType_Name: '',
        CategoryType: '',
    })
    //显示
    const GetGridType = () => {
        axios.get("http://localhost:5192/api/GridTye/GetGridType",
            {
                params:{
                    GridType_Name:formInline.GridType_Name,
                    CategoryType:formInline.CategoryType,
                }
            }
        )
        .then(res=>{
            Info.value=res.data.Data
        })
    }
    //重置
    const Reset=()=>{
        formInline.CategoryType="";
        formInline.GridType_Name="";
    }
    //逻辑删除
    const DelGridType = (Id:string) => {
        ElMessageBox.confirm(
            '确定删除?',
            '提示',
            {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }
        )
        .then(() => {
            axios.put("http://localhost:5019/api/GridType/DelGridType",
                {
                    Id:Id,
                    CreateNam:localStorage.getItem("Accoun_Name")||"",
                }
            )
            .then(res=>{
                if(res.data.Code==200)
                {
                    ElMessage.success(res.data.Message);
                    GetGridType();
                }
                else
                {
                    ElMessage.error(res.data.Message)
                }
            })
        })
    }

//--------------------------------------------------------添加弹出窗---------------------------------------------------------//

    const AdddialogVisible=ref(false);
    //按钮
    const AddGrid=()=>{
        AdddialogVisible.value=true
        //清除数据
        AddInfo.value.CategoryType="";
        AddInfo.value.GridType_Name="";
        AddInfo.value.ProfessionGrid=[];
    }

    const formSize = ref<ComponentSize>('default')
    const ruleFormRef = ref<FormInstance>()
    //添加响应式数据
    const AddInfo:any = ref({
        Id:"",
        GridType_Name: "",
        CategoryType: "",
        ProfessionGrid: [],
        CreateName: localStorage.getItem("Accoun_Name")||"",
    })

    const locationOptions = ['Home', 'Company', 'School']

    //验证
    const rules = reactive<FormRules>({
        GridType_Name: [
            { required: true, message: '请输入网格类型名称', trigger: 'blur' },
        ],
    })
    //按钮
    const submitForm = async (formEl: FormInstance | undefined) => {
        if (!formEl) return
        AddInfo.value.ProfessionGrid=AddInfo.value.ProfessionGrid.toString();
        await formEl.validate((valid, fields) => {
            if (valid) {
               axios.post("http://localhost:5019/api/GridType/AddGridType",AddInfo.value)
               .then(res=>{
                    if(res.data.Code==200)
                    {
                        ElMessage.success(res.data.Message);
                        //关闭弹窗
                        AdddialogVisible.value=false;
                        //跳转到显示页面
                        GetGridType();
                    }
                    else
                    {
                        ElMessage.error(res.data.Message)
                    }
               })
            } else {
                console.log('error submit!', fields)
            }
        })
    }


    const resetForm = (formEl: FormInstance | undefined) => {
        if (!formEl) return
        formEl.resetFields()
    }

    //--------------------------------------------------------修改弹出窗---------------------------------------------------------//
    const UpddialogVisible=ref(false);

    //点击修改按钮
    const UpdateGrid=(row:any)=>{
        UpddialogVisible.value=true;
        AddInfo.value.Id=row.Id;
        AddInfo.value.CategoryType=row.CategoryType;
        AddInfo.value.GridType_Name=row.GridType_Name;
        AddInfo.value.ProfessionGrid=row.ProfessionGrid.split(',')
    }

    //按钮
    const UpdatesubmitForm = async (formEl: FormInstance | undefined) => {
        if (!formEl) return
        AddInfo.value.ProfessionGrid=AddInfo.value.ProfessionGrid.toString();
        await formEl.validate((valid, fields) => {
            if (valid) {
               axios.put("http://localhost:5019/api/GridType/UpdateGridType",AddInfo.value)
               .then(res=>{
                    if(res.data.Code==200)
                    {
                        ElMessage.success(res.data.Message);
                        //关闭弹窗
                        UpddialogVisible.value=false;
                        //跳转到显示页面
                        GetGridType();
                    }
                    else
                    {
                        ElMessage.error(res.data.Message)
                    }
               })
            } else {
                console.log('error submit!', fields)
            }
        })
    }
    const options = Array.from({ length: 10000 }).map((_, idx) => ({
        value: `${idx + 1}`,
        label: `${idx + 1}`,
    }))
</script>


<style>
    .demo-form-inline .el-input {
    --el-input-width: 220px;
    }

    .demo-form-inline .el-select {
    --el-select-width: 220px;
    }
</style>